<template>
  <div>
    <el-upload
      action
      :auto-upload="false"
      list-type="picture-card"
      :on-preview="handlePreview"
      :on-remove="handlePreview"
      :before-remove="beforeRemove"
      :on-change="uploadSectionFile"
      :limit="1"
      ref="businessLicense"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <!-- 上传图片放大 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 回显图片的路径
      photoList: [{ url: "" }],
      // 放大图片的路径
      dialogImageUrl: "",
      // 上传图片放大弹出框
      dialogVisible: false,
    };
  },
  methods: {
    handlePreview(file) {
      // console.log(file);
      // 放大图片的路径
      this.dialogImageUrl = file.url;
      // 上传图片放大弹出框显示
      this.dialogVisible = true;
    },
    async bussEdit(row) {
      //调取接口然后把数据传到photoList中，我只上传一张图片，就直接写，上传多张的，循环就好了。
      this.photoList[0].url = 图片路径;
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>